<template>
  <div class="notice-detail-container">
    <!-- 返回按钮 -->
    <div class="back-button" @click="router.back()">
      <i class="el-icon-back"></i>
      <span>返回列表</span>
    </div>

    <!-- 主内容卡片 -->
    <div class="notice-card" v-if="noticeData">
      <!-- 标题区域 -->
      <div class="header">
        <h1 class="title">{{ noticeData.title }}</h1>
        <div class="meta">
          <div class="time-info">
            <i class="el-icon-time"></i>
            {{ formatTime(noticeData.createTime) }}
          </div>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content-wrapper">
        <div class="content" v-html="parsedContent"></div>
      </div>

      <!-- 底部信息 -->
      <div class="footer">
        <div class="creator">
          <el-avatar :size="36" :src="userAvatar" class="avatar"></el-avatar>
          <div class="user-info">
            <div>创建人：{{ noticeData.createBy }}</div>
          </div>
        </div>
        <div class="updater" v-if="noticeData.updateBy">
          <div class="update-info">
            <span>最后更新：{{ formatTime(noticeData.updateTime) }}</span>
            <span>更新人：{{ noticeData.updateBy }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-else class="loading-container">
      <el-skeleton :rows="5" animated/>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, onMounted, getCurrentInstance} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {ElTag, ElSkeleton, ElAvatar} from 'element-plus'
import dayjs from 'dayjs'
import {getNotice} from "@/api/notice/notice.js";

const {proxy} = getCurrentInstance();

const route = useRoute()
const router = useRouter()

const noticeId = ref(0);
const isNull = ref(false)
// 模拟数据
const noticeData = ref({})

const parsedContent = computed(() => {
  return noticeData.value.content?.replace(/\n/g, '<br>').replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
})

const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

// 用户头像
const userAvatar = computed(() => {
  return `https://api.dicebear.com/7.x/initials/svg?seed=${noticeData.value.createBy}`
})

function initNoticeData() {
  getNotice(noticeId.value).then(res => {
    noticeData.value = res.data;
  })
}

// 初始化加载数据
onMounted(() => {
  noticeId.value = proxy.$route.query.noticeId;
  initNoticeData();
})
</script>

<style scoped>
.notice-detail-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  min-height: 100vh;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6c757d;
  cursor: pointer;
  margin-bottom: 20px;
  transition: color 0.3s;
}

.back-button:hover {
  color: #4a5568;
}

.notice-card {
  background: linear-gradient(145deg, #f8f9fa, #ffffff);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(146, 153, 184, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.header {
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 20px;
  margin-bottom: 25px;
}

.title {
  color: #2d3748;
  font-size: 2.2rem;
  margin-bottom: 15px;
  font-weight: 600;
}

.meta {
  display: flex;
  gap: 20px;
  align-items: center;
  color: #718096;
}

.status-tag {
  font-size: 14px;
  padding: 6px 12px;
}

.time-info, .priority {
  display: flex;
  align-items: center;
  gap: 6px;
}

.content-wrapper {
  margin: 30px 0;
  line-height: 1.8;
  color: #4a5568;
  font-size: 16px;
}

.content {
  white-space: pre-wrap;
}

.footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.creator {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-info {
  color: #718096;
  font-size: 14px;
}

.update-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #718096;
  font-size: 14px;
}

.loading-container {
  padding: 30px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .notice-card {
    padding: 20px;
  }

  .title {
    font-size: 1.8rem;
  }

  .meta {
    flex-wrap: wrap;
    gap: 10px;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .update-info {
    align-items: flex-start;
  }
}
</style>
